import Vue from 'vue'
import Vuex from 'vuex'
import http from '@/util/http' // 引入自定义的axios
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [createPersistedState({
    reducer: (state) => {
      return {
        cityId: state.cityId,
        cityName: state.cityName
      }
    }
  })],
  state: {
    cityId: '310100',
    cityName: '上海',
    cinemaList: [], // 定义一个状态，接收异步请求过来的数据
    isTabbarShow: true
  },
  getters: {
  },
  mutations: {
    changeCityName (state, cityName) {
      state.cityName = cityName
      // console.log(cityName)
    },
    changeCityId (state, cityId) {
      state.cityId = cityId
    },
    changeCinemaData (state, data) { // 本页面传过来的函数名和参数
      state.cinemaList = data // 给状态加入数据
    },
    // clearCinema (state) {
    //   state.cinemaList = []
    // }
    show (state) {
      state.isTabbarShow = true
    },
    hide (state) {
      state.isTabbarShow = false
    }
  },
  actions: { // 这个里面专门支持异步请求数据
    // getCinemaData是其它组件传过来的函数名，cityId是传入函数名的同时也传过来的参数
    getCinemaData (store, cityId) {
      // console.log('getCinemaData')
      // console.log(cityId)
      return http({
        url: `/gateway?cityId=${cityId}&ticketFlag=1&k=1592507`,
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"172914982913636894826954753"}',
          'X-Host': 'mall.film-ticket.cinema.list'
        }
      }).then(res => {
        // console.log(res.data.data.cinemas)
        // 在本页面调用store.commit(),不用在前面加this.$。将里面的函数名和参数一起传入到mutations里去使用
        store.commit('changeCinemaData', res.data.data.cinemas)
      })
    }
  },
  modules: {
  }
})
